<template>
    <div class="w-full ">
        <!-- 搜索框 -->
        <div class="flex gap-4 mb-4">
            <el-select v-model="complaintType" size="large" style="width: 240px" suffix-icon="CaretBottom">
                <el-option v-for="item in complaintTypes" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
        </div>
        <!-- 数据列表 -->
        <el-table ref="multipleTableRef" @selection-change="handleSelectionChange" :data="productDownloadList"
            header-row-class-name="orange-header" border style="margin: 20px 0;">
            <el-table-column type="selection" width="55" />
            <el-table-column prop="touristName" label="投诉人" sortable />
            <el-table-column prop="phone" label="投诉联系方式" sortable />
            <el-table-column prop="date" label="投诉时间" sortable />
            <el-table-column label="被投诉商品信息">
                <template #default="scope">
                    <img :src="scope.row.product.productImg" alt="" style="width: 50px;height: 50px;">
                    <span>{{ scope.row.product.productName }}</span>
                </template>
            </el-table-column>
            <el-table-column label="投诉类型" prop="complaintType" />
            <el-table-column label="投诉状态" prop="status" />
            <el-table-column prop="complaintContent" label="投诉描述" sortable />
            <el-table-column label="操作">
                <template #default="scope">
                    <el-button type="danger" @click="handleComplaint(scope.$index, scope.row)">处理投诉</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="mt-8 flex justify-center">
            <el-pagination v-model:current-page="currentPage" :page-size="20" :total="pageTotal" prev-text="上一页"
                next-text="下一页" layout="prev, pager, next,total,jumper" @current-change="handleCurrentChange" />
        </div>
    </div>


</template>

<script setup>
import { ref, reactive, onMounted, } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
//加载json模拟数据
import loadLocalJson from "@/https/local/localJson.js";
//获取下载的商品信息
const productDownloadList = ref()

// 投诉类型
const complaintType = ref('-1')
const complaintTypes = ref([])
const getComplaintTypes = async () => {
    await loadLocalJson("json/downloadManage/complaintType.json").then((res) => {
        complaintTypes.value = res.data
    });

}
const getComplaintInfos = async () => {
    await loadLocalJson("json/shop/complaintInfos.json").then((res) => {
        productDownloadList.value = res.data.list;
        pageTotal.value = res.data.total;
    });
}
//分页相关的数据
const currentPage = ref(1);
const pageTotal = ref(0);
const handleCurrentChange = (val) => {
    console.log(`current page: ${val}`);
    //todo 做分页查询
};

const multipleTableRef = ref()
const multipleSelection = ref([])
const handleSelectionChange = (val) => {
    multipleSelection.value = val
}
//处理投诉
const handleComplaint = async () => {
    ElMessageBox.confirm('确定要处理投诉吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(async () => {
        //todo 处理投诉
        ElMessage({
            type: 'success',
            message: '处理成功'
        })
        // await getComplaint()
    }).catch(() => {
       
    })
}


onMounted(async () => {
    await getComplaintTypes()
    await getComplaintInfos()
})
</script>
<style lang="less" scoped></style>
<style>
/* 表格整体背景色 */
.el-table {
    /* background-color: #666 !important; */
    /* 浅黄色背景 */
}

/* 表头样式 */
.orange-header th {
    background-color: #eee !important;
    /* 橘色背景 */
    color: #777 !important;
    /*文字颜色*/
}

/* 可选：hover效果 */
.el-table--enable-row-hover .el-table__body tr:hover>td {
    background-color: #ffefd5 !important;
}
</style>